<template>
  <a-form :form="form" :model="formData" :label-col="{ span: 24 }" :wrapper-col="{ span: 24 }">
    <a-form-item label="请选择下一节点" required>
      <a-radio-group v-model:value="formData.nextNode">
        <a-radio v-for="option in nodeOptions" :key="option.value" :value="option.value">{{
          option.label
        }}</a-radio>
      </a-radio-group>
    </a-form-item>
    <a-form-item label="请选择处理人" required>
      <div class="avatar-wrapper">
        <div
          class="avatar-plus"
          :style="{ width: `${avatarSize}px`, height: `${avatarSize}px` }"
          @click="SelectProcessor"
        >
          +
        </div>

        <div
          v-for="(item, index) in avatarList"
          :key="item"
          class="avatar-cont"
          :class="{
            'avatar-icon': index + 1 <= 6,
            'column-wrap': index + 1 > 6,
            'no-plus': (index + 1) % 7 === 0
          }"
          :style="{ width: `${avatarSize}px`, height: `${avatarSize}px` }"
        >
          <img src="../../assets/images/template_icon_8.png" :alt="item.id" />
          <span
            :class="{
              'remove-beforsix': index + 1 <= 6,
              'remove-plus': index + 1 > 6 && (index + 1) % 7 !== 0,
              'remove-aftersix': (index + 1) % 7 === 0
            }"
            @click="removeEvent(item)"
          >
            -
          </span>
        </div>
      </div>
    </a-form-item>
  </a-form>
</template>

<script>
import { ref, computed, reactive, defineComponent } from 'vue';

export default defineComponent({
  setup() {
    const form = ref(null);
    const formData = ref({
      nextNode: ''
    });
    const nodeOptions = [
      { label: '核稿', value: 'review' },
      { label: '会签', value: 'sign' },
      { label: '签发', value: 'approve' },
      { label: '套红', value: 'seal' }
    ];
    const firstAvatar = 'https://i.imgur.com/TnCS5qs.png';
    const firstAvatarIcon = 'plus';
    const avatarList = reactive([
      { id: 1, title: '2' },
      { id: 2, title: '2' },
      { id: 3, title: '2' },
      { id: 4, title: '2' },
      { id: 5, title: '2' },
      { id: 6, title: '2' },
      { id: 7, title: '2' },
      { id: 8, title: '2' },
      { id: 9, title: '2' },
      { id: 10, title: '2' },
      { id: 11, title: '2' },
      { id: 12, title: '2' },
      { id: 13, title: '2' },
      { id: 14, title: '2' },
      { id: 15, title: '2' }
    ]);
    const avatarSize = 40; // 头像的尺寸
    const iconSize = 20; // 加号图标的尺寸

    const removeEvent = item => {
      // 从数组中删除当前项
      const index = avatarList.indexOf(item);
      if (index !== -1) {
        avatarList.splice(index, 1);
      }
    };
    const avatarListWithPlus = computed(() => [{ id: 0, src: '', plus: true }, ...avatarList]);

    return {
      form,
      formData,
      nodeOptions,
      firstAvatar,
      firstAvatarIcon,
      avatarListWithPlus,
      avatarSize,
      iconSize,
      avatarList,
      removeEvent
    };
  }
});
</script>

<style scoped>
.avatar-wrapper {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.avatar-cont {
  position: relative;
}
.avatar-cont span {
  text-align: center;
  line-height: 10px;
  color: #fff;
  cursor: pointer;
}
.avatar-plus {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px dashed #3296fa;
  border-radius: 4px;
  margin-left: 8px;
  margin-right: -8px;
  color: #3296fa;
  background: #f0faff;
  cursor: pointer;
}
.avatar-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  margin-left: 20px;
}
.avatar-icon::before {
  content: '+';
  display: block;
  width: 96%;
  height: 1px;
  margin-top: 0px;
  color: #cfd3d6;
  margin: 0 6px 20px 10px;
}
.column-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  margin-left: 20px;
  margin-top: 20px;
}
.column-wrap::before {
  content: '+';
  display: block;
  width: 96%;
  height: 1px;
  margin-top: 0px;
  color: #cfd3d6;
  margin: 0 6px 20px -6px;
}
.no-plus {
  margin-left: 8px;
}
.no-plus::before {
  content: none;
}
.remove-aftersix {
  position: absolute;
  top: -5px;
  right: -4px;
  width: 13px;
  height: 13px;
  background: #ff5252;
  border-radius: 50%;
}
.remove-beforsix {
  position: absolute;
  top: -5px;
  right: -17px;
  width: 13px;
  height: 13px;
  background: #ff5252;
  border-radius: 50%;
}
.remove-plus {
  position: absolute;
  top: -5px;
  right: -9px;
  width: 13px;
  height: 13px;
  background: #ff5252;
  border-radius: 50%;
}
</style>
